<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-11-05 09:34:27
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2022-11-30 11:19:50
 * @FilePath: \mould\src\components\public\el-tree.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->


<template>

    <div>
        <!-- <input ref="input" :value="value" @input="$emit('ababab', $event.target.value)"> -->
        <!-- 类似与字典项，数组里是对象，需要调接口 -->
        <!-- {{ nData }}{{ nodeKey }} -->
        <el-select v-if="typeText == 1" v-model="nData" :placeholder="placeholderText" value-key="fItemid"
            @visible-change="function () {
                return getzd(defaultText);
            }
            " :disabled="disableText" @change="$emit('select', $event)">
            <el-option v-for="(v, i) in options" :key="i" :label="v[nodeKey]" :value="v[nodeKey]">
            </el-option>
        </el-select>
        <!-- 类似与字典项，数组里是对象 -->
        <el-select v-if="typeText == 2" @change="function (v) { return select(v) }" v-model="nData"
            :placeholder="placeholderText" :disabled="disableText" :multiple="multiple">
            <el-option v-for="(v, i) in option" :key="i" :label="v[nodeKey]" :value="v">
            </el-option>
        </el-select>

        <!-- <el-select v-if="typeText == 2" :disabled="disableText" placeholder="/" v-model="nData" :multiple="multiple"
            @change="function (item) { return select(item) }">
            <el-option v-for="(item, index) in option" :label="`${item.nodeKey}`" :value="item" :key="index">
            </el-option>
        </el-select> -->
        <!-- 类似与字典项，数组里是字符串，不需要调接口 -->
        <el-select v-if="typeText == 3" @change="$emit('select', $event)" v-model="nData" :placeholder="placeholderText"
            :disabled="disableText" :multiple="multiple">
            <el-option v-for="(v, i) in option" :key="i" :label="v" :value="v">
            </el-option>
        </el-select>



    </div>
</template>
<script>
import {

    getBaseDataitemDetailByItemCode,

} from "@/api/request.js";
export default {
    props: {
        dataText: {
            default: "",
            type: [String, Number, Boolean, Array, Object],
        },
        defaultText: {
            default: "",
            type: String,
        },
        disableText: {
            type: Boolean,
            default: false,
        },
        nodeKey: {
            type: String,
            default: 'fItemname',

        },
        placeholderText: {
            default: "请选择",
            type: String,
        },
        multiple: {
            type: Boolean,
            default: true,
        },
        option: {
            type: Array,
            default: () => []
        },
        typeText: {
            type: String,
            default: '1'
        },
        value: {
            type: [String, Number, Boolean, Array, Object],
            default: ''
        },
    },

    model: {
        prop: 'value',
        //这个事件名可以随意写，它实际上是规定了子组件要更新父组件值需要注册的方法
        event: 'select'
    },


    data() {
        return {
            // treeData: [],
            // 左侧机构树
            // defaultProps: {
            //     children: "children",
            //     label: "fShortname",
            // },
            options: [],
            nData: this.value,
            nDatas: ""

            // nData: this.dataText ? this.dataText : this.placeholder ? this.placeholder : '请选择',
        }
    },
    watch: {
        value: {


            handler(a) {

                console.log(a);

                // this.inputValue = this.dataText


                this.nData = a


            },
            // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
            immediate: true

        },
    },
    mounted() {



    },
    methods: {

        select(e) {
            console.log(e);
            this.nData = e[this.nodeKey]
            this.$emit('select', e)
        },
        getzd(data) {
            getBaseDataitemDetailByItemCode({
                fItemcode: data,
            })
                .then((res) => {
                    // 桩类别
                    this.options = res.data.baseDataitemdetailList;
                    console.log(this.options);
                })
                .catch(() => {
                    this.$message.error("接口报错");
                });
        },
    }
}
</script>
<style scoped>
.tree {
    height: 100%;
}
</style>
